<template>
  <div class="descriptions " v-loading="isLoading">
    <div class="descriptions__body">
      <el-row class="descriptions__table ">
        <el-col v-for="field in fieldList" :span="field.displayConfig.colSpan?field.displayConfig.colSpan:24/columns">
          <div class="descriptions-item__cell" style="display: flex;">
            <div class=" descriptions-item__label has-colon"  style="max-width: 200px;">
              <span  v-text="(field.displayConfig.name?field.displayConfig.name:field.name)"></span>
              <span v-if="field.unit&&field.unit.length>0&&unitNameMap[field.unit] && unitNameMap[field.unit] != '无'" slot="append">({{unitNameMap[field.unit]}})</span>
            </div>
            <div class="descriptions-item__content" >
              <span v-if="field.displayConfig.component=='select'" v-text="getOptionVal(field.displayConfig.optionType,fieldValueMap[field.id])"></span>
              <span v-else v-text="fieldValueMap[field.id] == 'null' ? '' : fieldValueMap[field.id]"></span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomFieldShow",
  props: {
    tableId: {type: String, default: null},
    columns: {type: Number, default: 1},
    data: {},
    scope: {type: String, default: null}
  },
  data() {
    return {
      unitNameMap:{},
      fieldValueMap: {},
      fieldList: [],
      optionMap:{},
      isLoading: true,
    }
  },
  watch: {
    data(val) {
      if (!this.data) {
        return;
      }
      for (let key in this.data) {
        this.fieldValueMap[key] = this.data[key];
      }
    },
    scope(newValue) {
      this.loadInputFieldList();
    },
    tableId() {
      this.loadInputFieldList();
    },
  },
  mounted() {
    this.loadInputFieldList();
    this.unitNameMap = this.$store.state.unitNameMap;
  },
  methods: {
    getOptionVal(optionType,value){
      let refArr=this.optionMap[optionType];

      let result ="";
      refArr.forEach((item)=>{
        if(item.id == value){
          result = item.name;
        }
      })

      return result;
    },
    loadInputFieldList: function () {
      this.isLoading = true;
      this.$get("/field/data?tableId=" + this.tableId, {scope: this.scope}, (response) => {
        let map = {};
        for (const item of response.data) {
          let customValue = this.data[item.id];
          if(item.show) {
            if(item.displayConfig&&item.displayConfig.component=='select'&&item.displayConfig.optionType){
              this.optionMap[item.displayConfig.optionType] = [];
            }
            if (this.data && !customValue) {
              customValue = '';
            }
            map[item.id] = customValue;
          }
        }

        let list = [];
        this.optionMap = JSON.parse(JSON.stringify(this.optionMap));
        for(const item of response.data) {
          if(item.show) {
            if(item.displayConfig&&item.displayConfig.component=='select'&&item.displayConfig.optionType){
              if(item.displayConfig.optionSource=='enum') {
                let optionType1 = item.displayConfig.optionType;
                this.$get('/meta/type/'+item.displayConfig.optionType,{},(response)=>{
                  this.optionMap[optionType1] = response.data;
                })
              } else if(item.displayConfig.optionSource=='dict') {
                let optionType2 = item.displayConfig.optionType;
                this.$get('/dict/queryList',{type:optionType2},(response2)=>{
                  this.optionMap[optionType2] = response2.data;
                })
              } else if(item.displayConfig.optionSource=='custom') {
                let optionType3 = item.displayConfig.optionType;
                this.$get(optionType3,{},(response)=>{
                  this.optionMap[optionType3] = response.data;
                })
              }
            }
            if(!item.displayConfig) {
              item.displayConfig = {};
            }
            list.push(item);
          }
        }

        this.fieldValueMap = map;
        this.fieldList = list;
      }, () => {
        this.isLoading = false;
      });
    },

  }
}
</script>

<style scoped>

</style>